<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>房屋添加</title>
	<link rel="stylesheet" href="${pageContext.request.contextPath}/css/add.css">
	<link rel="stylesheet" href="${pageContext.request.contextPath}/lib/bp.css">
	<style type="text/css">
		.breadcrumb{
			margin-bottom:0;
		    padding-bottom: 20px;
		}
		.breadcrumb,.breadcrumb li{
			font-size:20px;
			background: white;
			line-height: 50px;
		}
		.breadcrumb li a:hover{
			text-decoration: underline;
		}
		.form-control{
			height: auto;
		}
		.form-group{
			overflow: hidden;
			margin-bottom: 30px;
		}
		.sub{
			width:300px;
			margin-left:150px;
			display: flex;
			justify-content: space-around;
		}
		.btn{
			width: 80px;
		}
		.form-group span{
			line-height: 34px;
			color: #f00;
			font-size: 12px;
		}
		.no_padd_top{
			padding-top:0;
			padding-bottom: 0
		}
	</style>
</head>
<body style="background: #f5f5f5">
	
	<div class="header">
		<h1><a href="#">青年公寓项目</a></h1>
		<div class="user">
			<a href="#">${user}用户</a>
			<a href="${pageContext.request.contextPath}/user/exit">退出</a>
		</div>
	</div>
	<div style="margin: 25px 150px;">
		<div style="border-radius:5px;">
			<ol class="breadcrumb">
				<li><a href="${pageContext.request.contextPath}/house/huoseList?index=1">公寓管理</a></li>
				<li><a href="${pageContext.request.contextPath}/house/huoseList?index=1">租赁合同</a></li>
				<li class="active">添加租赁合同</li>
			</ol>
			<div style="padding: 0 150px;overflow: hidden;background: white;">
					<!-- onsubmit="subForm()" -->
				<form action="${pageContext.request.contextPath}/lc/addLc" method="post" 
					  class="form-horizontal" onsubmit="return checkSimpleForm()">
					 <div class="form-group">
					    <label class="col-sm-2 control-label">房屋编号</label >
					    <div class="col-sm-5">
					    	<input class="form-control" id="hid" name="flat_id" placeholder="房屋编号" 
					    		onblur="ckeckHouse()">
					    </div>
					    <span id="house"></span>
					  </div>
					  <div class="form-group">
					    <label  class="col-sm-2 control-label">租户编号</label>
					    <div class="col-sm-5">
					    	<input class="form-control" id="lid" name="tenant_id" placeholder="租户编号" 
					    		onblur="ckeckLessee()">
					    </div>
					     <span id="lessee"></span>
					  </div>
					  <div class="form-group">
					    <label  class="col-sm-2 control-label">租赁开始时间</label>
					    <div class="col-sm-5">
					    	<input class="form-control no_padd_top" type="date" name="bgtime">
					    </div>
					  </div>
					  <div class="form-group">
					    <label  class="col-sm-2 control-label">租赁结束时间</label>
					    <div class="col-sm-5">
					    	<input class="form-control no_padd_top" type="date" name="endTime">
					    </div>
					  </div>
					  <div class="form-group">
					    <label  class="col-sm-2 control-label">房租总额</label>
					    <div class="col-sm-5">
					    	<input class="form-control" name="lc_total_rent" placeholder="房租总额">
					    </div>
					  </div>
					  <div class="form-group">
					    <label  class="col-sm-2 control-label">付款方式</label>
					    <div class="col-sm-5">
					    	<select name="lc_pay_way" style="width: 100px;height: 25px;">
					    		<option value="0">月付
					    		<option value="1">半年付
					    		<option value="2">年付
					    		<option value="3">季付
					    	</select>
					    </div>
					  </div>
					  <div class="form-group">
					    <label  class="col-sm-2 control-label">押金</label>
					    <div class="col-sm-5">
					    	<input class="form-control" name="lc_deposit" placeholder="押金">
					    </div>
					  </div>
					  <div class="form-group">
					    <label  class="col-sm-2 control-label">付款期数</label>
					    <div class="col-sm-5">
					    	<input class="form-control" name="lc_period_payment" placeholder="付款期数">
					    </div>
					  </div>
					  <div class="form-group">
					    <label  class="col-sm-2 control-label">合同签署人</label>
					    <div class="col-sm-5">
					    	<input class="form-control" name="lc_contract_signer" placeholder="合同签署人">
					    </div>
					  </div>
					  <div class="form-group">
					    <label  class="col-sm-2 control-label">合同状态</label>
					    <label class=" radio-inline" style="margin-left: 15px;">
					    	<input type="radio" name="lc_contract_state" value="0" checked="checked">已生效
					    </label >
					    <label  class=" radio-inline">
				    		<input type="radio" name="lc_contract_state" value="1">已失效
					    </label >
					  </div>
					  <div class="sub" >
					 		<input type="submit" value="提交" class="btn btn-info">
					 		<input type="button" value="取消" class="btn btn-info" onclick="window.history.back();">
					  </div>
				</form>
				<div class="footer">
					智游教育 ©2018 河南智游臻龙教育科技有限公司
				</div>
			</div>
		</div>
		
	</div>
	<!-- 表单验证待完成 -->
	<script type="text/javascript">
		/* 简单的表单验证 */
		function checkSimpleForm(){
			var house = document.getElementById('house').innerText
			var lessee = document.getElementById('lessee').innerText
			if(house == "" && lessee == ""){
				return true;
			}else{
				alert('请填写正确的合同信息！')
				return false;
			}
		}
		
		/* 房屋编号验证 */
		function ckeckHouse(){
			var hid = document.getElementById('hid').value
			var house = document.getElementById('house')
			if(/^[0-9]*$/.test(hid) && hid != ""){
				var url = 'house/checkHouse?id='+hid
				ajax(url).then(function(rs){
					if(rs){
						house.innerText = ""
						return true;
					}else{
						house.innerText = "该房屋编号不存在，请重新输入"
						return false;
					}
				})
			}else{
				house.innerText = '*请输入正确的房屋编号（纯数字）'
				return false;
			}
		}
		
		/* 租户编号验证 */
		function ckeckLessee(){
			var lid = document.getElementById('lid').value
			var lessee = document.getElementById('lessee')
			if(/^[0-9]*$/.test(lid) && lid != ""){
				var url = 'lessee/checkLessee?id='+lid
				ajax(url).then(function(rs){
					if(rs){
						lessee.innerText = ""
							return true;
					}else{
						lessee.innerText = "该租户编号不存在，请重新输入"
							return false;
					}
				})
				
			}else{
				lessee.innerText = '*请输入正确的租户编号（纯数字）'
				return false;
			}
		}
		
		function ajax(url){
			return new Promise(function(resolve,reject){
				var xml = new XMLHttpRequest();
				xml.open("post","http://localhost:9090/YouthHostel/"+url,true);
				xml.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
				xml.onreadystatechange = function () {
		            if (xml.readyState == 4 && xml.status == 200) {
		                if(xml.responseText == '200'){
		                	resolve(true);
		                }else{
		                	resolve(false);
		                }
		            }
		        }
				xml.send();
			})
		}
	</script>
</body>
</html>